<script setup>
import { ref,onMounted} from 'vue'
import axios from 'axios';
import jwt_decode from "jwt-decode";
import buttoncoment from '../button/button.vue'
//本地读取回来的数据
const customer = ref('')

const userId = ref('1')

const userNumber =ref('U10000000001')

const codePath = ref('')
let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
    token = jwt_decode(localStorage.getItem("longToken"))
}

onMounted(()=>{
    // let token =  localStorage.getItem('token')
    // userNumber.value = token.userNumber
    // userId.value = token.userId
    axios.get("http://192.168.110.221:8080/user/QRCodeFindController", {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber:token.userNumber
        }
    }).then((resp) => {
        console.log(resp);
        console.log(resp.data.datas);
        codePath.value = resp.data.datas;
    }).catch((e) => {
        // catch中获取到的值是请求失败或者代码问题造成的错误，而因代码造成的错误在.then()中获取不到，因此我们常用catch
        // 我们偶尔会遇到一些问题：明明请求成功了，逻辑却进入catch中了，这时说明在then中的处理逻辑可能出现了错误，并不是请求失败才会进入catch
        //跳转到404页面
        // router.push('/404')
    })
})


</script>
<template>
    <div class="radius">
        <div class="left">
            <i class="iconfont icon-erweima right-1" style="font-size: 30px; color: aquamarine;"></i>
        </div>
        <div class="right">
            {{ token.userNumber }}
        </div>
    </div>
    <div class="radius-1">
        <!-- <img src="../../../public/static/images/收钱二维码.jpg" alt="收钱二维码" style="width: 100%;height: 100%;"> -->
        <img :src="'http://192.168.110.221:8080' + codePath" alt="二维码" style="width: 100%; height: 100%; ">
    </div>
</template>
<style scoped>
.radius {
    height: 60px;
    width: 100%;
    border: 1px;
    line-height: 60px;
    background-color: rgb(241, 249, 241);
}
.radius-2{
    margin-top: 10px;
    width: 100%;
    background-color: rgb(241, 249, 241);
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
}
.left {
    width: 10%;
    float: left;
    margin-left: 20px;
}

.right {
    width: 70%;
    float: right;
    margin-right: 40px;
    margin-top: -2px;
}

input {
    width: 90%;
    font-size: 18px;
    outline: none;
    margin-top: 10px;
    margin-left: 5px;
    padding: 10px 0;
    border: transparent;
    border-bottom: 1px solid lightgray;
}


.radius-1 {
    margin-top: 10px;
    margin-left: 10%;
    height: 260px;
    width: 80%;
    border: 1px;
    border-radius: 10px;
    background-color: rgb(240, 245, 240);
}
</style>